
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="chant/../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="chant/../css/common.css"/>
	</head>
	<body>
		<div class="all">
			<div class="content clearfix">
				<div class="wrap-left">
					<ul >
					<li class="clearfix">
						<div>
							<img src="chant/../img/center-icon-dz.png" alt="" />
						</div>
						<p>小明</p>
					</li>
					<li class="clearfix">
						<div>
							<img src="chant/../img/headimg.jpg" alt="" />
						</div>
						<p>小红</p>
					</li>
					<li class="clearfix active">
						<div>
							<img src="chant/../img/center-icon-dz.png" alt="" />
						</div>
						<p>小明</p>
					</li>
				</ul>
				</div>
				<div class="wrap-right">
					<div class="message">
						<div class="message-person clearfix">
							<div class="message-person-left clearfix">
								<div>
									<img src="chant/../img/headimg.jpg" alt="" />
								</div>
								<p>小红</p>
							</div>
							<div class="message-person-icon">
								<span>-</span>
								<span>+</span>
								<span>×</span>
							</div>
						</div>
						
						<div class="message-history">
							<ul id="message-content">
								<!--<li class="clearfix content-mine">
									<div class="message-left">
										<img src="../img/headimg.jpg" alt="" />
									</div>
									<div class="message-right">
										<h4 class="title">
											<span class="time">2018-2-22</span>
											<span class="name">小红</span>
										</h4>
										<p class="mine-content">蓄势待发是</p>
									</div>
								</li>
								<li class="clearfix content-other">
									<div class="message-right">
										<img src="../img/center-icon-dz.png" alt="" />
									</div>
									<div class="message-left">
										<h4 class="title">
											<span class="time">2018-2-22</span>
											<span class="name">小明</span>
										</h4>
										<p class="mine-content">蓄势待发是</p>
										
										
									</div>
									
								</li>
								<li class="clearfix content-other">
									<div class="message-right">
										<img src="../img/center-icon-dz.png" alt="" />
									</div>
									<div class="message-left">
										<h4 class="title">
											<span class="time">2018-2-22</span>
											<span class="name">小明</span>
										</h4>
										<p class="mine-content">蓄势待发是圣斗士东方闪电</p>
									</div>
									
								</li>
								<li class="clearfix content-mine">
									<div class="message-left">
										<img src="../img/headimg.jpg" alt="" />
									</div>
									<div class="message-right">
										<h4 class="title">
											<span class="time">2018-2-22</span>
											<span class="name">小红</span>
										</h4>
										<p class="mine-content">蓄势待发是</p>
									</div>
								</li>-->
							</ul>
						</div>
					</div>
					<div class="send">
						<div class="send-head clearfix">
							<div class="send-icon">
								<span class="send-icon1"></span>
								<span class="send-icon2"></span>
							</div>
							<div class="send-history">
								<span>聊天记录</span>
							</div>
						</div>
						<form action="" method="post">	
							<textarea name="content" id="content"></textarea>   
						</form>
						<div class="send-button">
							
							<button id="btn">发送</button>
							<span>关闭</span>
						</div>
					</div>
				</div>
			</div>
				
		
		</div>
		
		<script src="chant/../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
		
		var ws = new WebSocket("ws://localhost:8080/chat/chat");
		
		ws.onopen=function(e){
			var e=e || event;		
		}
		ws.onmessage=function(e){
			var e=e || event;
			var data=JSON.parse(e.data);
			var content = data.content;
			var values="<li class='clearfix content-mine'>"+
				"<div class='message-left'>"+
					"<img src='../img/headimg.jpg' alt='' />"+
				"</div>"+
				"<div class='message-right'>"+
					"<h4 class='title'>"+
						"<span class='time'>2018-2-22</span>"+
						"<span class='name'>小红</span>"+
					"</h4>"+
					"<p class='mine-content'>"+content+"</p>"+
				"</div>"+
			"</li>";
			$('#message-content').append(values);
		}
		
		
		$('#btn').click(function(){
			var content = $('#content').val();
			if(content){
				var dt= new Object();
				dt.content=content;
				ws.send(JSON.stringify(dt));
			}
		});
		
		
		
		</script>
	</body>
</html>

